<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>临摹</title>
    <style>
        /* 初始化部分: 重置html标签自带效果 */
        ul {
            list-style: none;
        }

        html, body {
            margin: 0;
            padding: 0px;
            min-width: 1200px;
        }

        /* 头部区域 */
        .header {
            width: 100%;
            height: 56px;
            background: #ffe300;
            margin: 0;
            padding: 0;
            display: block;
            outline: 0;
        }

        .navigation {
            position: relative;
            margin: 0 70px;
        }

        .logo {
            position: absolute;
            top: 18px;
        }

        .f {
            width: 100%;
            text-align: center;
            line-height: 56px;
            font-size: 14px;
            color: #282828
        }

        .f ul {
            
            margin: 0 250px;
            padding: 0;
            overflow: hidden;
        }

        li {
            float: left;
            cursor: pointer;
        }

        .menu {
            display: inline-block;
            padding: 0 24px;
        }

        .text-menu:hover {
            background-color: #282828;
            color: #ffe300;
        }

        li.s-svg, a.menu {
            height: 56px;
        }

        /* 搜索区域 */
        .search {
            position: absolute;
            top: 0;
            right: 230px;
            width: 56px;
            height: 56px;
            text-align: center;
            line-height: 56px;
            cursor: pointer;
        }

        /* 右侧: 上传, 登录, 注册 */

        .right {
            width: 230px;
            height: 56px;
            position: absolute;
            top: 0;
            right: 0;

        }

        .upload {
            position: relative;
            float: left;
            padding: 0;
        }

        .menu_line {
            height: 15px;
            /* width:1px;  */
            border-left: 1px #282828 solid;
            margin: 21px 0 0 0;
        }

        .right-right {
            float: left;
            margin: 0;
            padding: 0;
            text-align: center;
            line-height: 56px;
            font-size: 14px;
            color: #282828
        }

        /* 主体区域 */
        .main-content {
            padding: 20px 0 24px 0;
        }

        .main-content img {
            border-radius: 4px;
        }

        .main {
            width: 100%;
            height: 400px;
            text-align: center;
        }

        .main-imga {
            border-radius: 4px;
        }

        .main-imgb {
            margin: 8px;
        }
    </style>
</head>

<body>
    <!-- 头部区域 -->
    <div class="header">
        <div class="navigation">
            <!-- logo -->
            <div class="logo">
                <img src="./img/logo.svg" alt="logo" width="120" height="20">
            </div>
            <div class="f">
                <ul>
                    <li class="s-s text-menu">
                        <a class="menu">首页</a>
                    </li>
                    <li class="s-f text-menu">
                        <a class="menu">发现</a>
                    </li>
                    <li class="s-g text-menu">
                        <a class="menu">共创</a>
                    </li>
                    <li class="s-h text-menu">
                        <a class="menu">活动</a>
                    </li>
                    <li class="s-z text-menu">
                        <a class="menu">正版素材</a>
                    </li>
                    <li class="s-k text-menu">
                        <a class="menu">课程</a>
                    </li>
                    <li class="s-b text-menu">
                        <a class="menu">版权保护</a>
                    </li>
                    <li class="s-svg">
                        <a class="menu"><img src="./img/nav-more.svg" alt="more" width="20" height="56"></a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <a class="menu"><img src="./img/nav-search.svg" alt="search" width="20" height="56"></a>
            </div>
            <div class="right">
                <div class="upload">
                    <a class="menu"><img src="./img/nav-upload.svg" alt="upload" width="25" height="56"></a>
                </div>
                <ul class="right-right">
                    <li class="list">
                        <a class="menu">登录</a>
                    <li class="menu_line"></li>
                    <a class="menu">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 主体区域 -->
    <div class="main-content">
        <div class="main">
            <a class="main-imga">
                <img src="./img/main.PNG" alt="upload" width="1380" height="350">
            </a>
        </div>
        <div class="main">
            <a class="main-imgb">
                <img src="./img/1.PNG" alt="upload" width="260" height="208">
            </a>
            <a class="main-imgb">
                <img src="./img/2.PNG" alt="upload" width="260" height="208">
            </a>
            <a class="main-imgb">
                <img src="./img/3.PNG" alt="upload" width="260" height="208">
            </a>
            <a class="main-imgb">
                <img src="./img/4.PNG" alt="upload" width="260" height="208">
            </a>
            <a class="main-imgb">
                <img src="./img/5.PNG" alt="upload" width="260" height="208">
            </a>
        </div>
    </div>
</body>

</html>